<script setup lang="ts">
import mapTypeList from "@/utils/ol/maptype";
import {h, onMounted, ref, watch, useAttrs} from "vue";
import img_traffic from '../../assets/map/traffic.png'
import img_map from '../../assets/map/map.png'
import img_jyl from '../../assets/map/map-jyl.png'
import img_satellite from '../../assets/map/satellite.png'
import {createPopup} from "@/utils/gps/createPopup";
import Enclosure from "@/components/map/controlChild/enclosure.vue";

const attrs = useAttrs()

const mapType = ref()
const mapStyle = ref()
const mapStyleList = ref([
  {label: "路况",value: 1, src: img_traffic },
  {label: "标准",value: 2, src: img_map },
  // {label: "极夜蓝",value: 3, src: img_jyl },
  {label: "卫星",value: 4, src: img_satellite },
])


/**
 * 更换地图类型
 * @param val
 */
function mapTypeChange(val: string) {
  console.log(val)
  // closePopup()
  // // map.removeOverlay
  // map.removeLayer(devicesLayer)
  // baseLayers?.forEach((l) => map.removeLayer(l))
  // setMap(val)
  // baseLayers = createLayers2()
  // baseLayers?.forEach((l) => map.addLayer(l))
  // map.addLayer(devicesLayer)
}
const enclosureEl = ref()

function openEnclosure(){
  console.log(attrs);
  createPopup({
    default: (close) => h(Enclosure, {
      onClose: close,
      ...attrs
    })
  }, {
    mask: false,
    width: 300,
    height: 400,
    title: "围栏管理",
    target: enclosureEl.value as HTMLElement || undefined,
    rootElStyle: "left: 0; top: 0; transform: translate(127px, 44px);",
    noHeader: true
  })
}

</script>

<template>
  <div class="map_control">
    <ul>
      <li @click="openEnclosure" ref="enclosureEl">
        <img src="../../assets/map/weilan.png" width="16" alt=""/>
        <p>围栏</p>
      </li>
      <li>
        <img src="../../assets/map/iconCeju.svg" alt=""/>
        <p>测距</p>
      </li>
      <li>
        <img src="../../assets/map/icon-area.svg" alt=""/>
        <p>面积</p>
      </li>
      <li>
        <img src="../../assets/map/ditu.svg" alt=""/>
        <el-dropdown @command="mapTypeChange" trigger="click" :hide-on-click="false">
            <span class="el-dropdown-link">
              地图
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in mapTypeList" :key="item.id" :command="item.id">
                <el-popover
                    popper-style="padding: 0"
                    :offset="30"
                    placement="left"
                    :width="180"
                    trigger="click"
                >
                  <template #reference>
                    {{ item.name }}
                  </template>
                  <el-segmented v-model="mapStyle" :options="mapStyleList">
                    <template #default="{ item }">
                      <div class="mapStyle">
                        <img :src="item.src" alt="">
                        <p>{{item.label}}</p>
                      </div>
                    </template>
                  </el-segmented>
                </el-popover>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li>
        <el-icon></el-icon>
        <p>图标</p>
      </li>
      <li>
        <el-icon></el-icon>
        <p>全屏</p>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.map_control{
  position: absolute;
  align-items: center;
  display: flex;
  top: 20px;
  right: 10px;
  background: white;
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.map_control ul{
  display: flex;
}
.map_control ul li{
  list-style: none;
  padding: 8px 10px;
  display: flex;
  align-items: center;
}
.map_control ul li p {
  margin-left: 5px;
}
.mapStyle{
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
}
.mapStyle img{
  width: 100%;
  height: 100%;
}
.mapStyle p{
  position: absolute;
  bottom: 0;
  color: white;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
._popper{
  padding: 0;
}
:deep .el-segmented__item{
  padding: 0;
}
:deep .el-segmented__item:not(:last-child){
  margin-right: 10px;
}
</style>